<template>
  <div class="box">
    <SearchVue></SearchVue>
    <div class="content">
      <BannerCopyVue></BannerCopyVue>
      <NavBarVue></NavBarVue>
      <SecondsKillVue></SecondsKillVue>
      <DetailVue></DetailVue>
    </div>
    <FooterBarVue class="footer"></FooterBarVue>
  </div>
</template>

<script>
import SearchVue from '@/components/Search.vue';
import BannerCopyVue from '@/components/Banner copy.vue';
import NavBarVue from '@/components/NavBar.vue';
import SecondsKillVue from '@/components/SecondsKill.vue';
import DetailVue from '@/components/Detail.vue';
import FooterBarVue from '@/components/FooterBar.vue';
export default {
 name:'Home',
 components:{
  SearchVue,BannerCopyVue,SecondsKillVue,DetailVue,NavBarVue,FooterBarVue
 }
}
</script>

<style>
  .box{
    /* width: 100%; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }

  .content{
    flex:1;
    overflow: auto;
    width: 100%;
    /* background-color: rgb(204, 204, 204); */
  }


</style>